<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>shopping_cart</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .nav_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 54px;
            background-color: white;
        }

        .nav_img {
            width: 34px;
            height: 34px;
            border-radius: 4px;
            margin-left: 15px;
            margin-right: 8px;
            background-color: #f8f8f8;
        }

        .nav_appname {
            font-size: 12px;
            color: #333333;
        }



        .nav_btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 2px;
            text-align: center;
            color: #ff7037;
            font-size: 14px;
            margin-right: 15px;
            border: 1px solid #ff7037;
        }

        .nav_btn:active {
            opacity: 0.7;
        }

        .shopping-list {
            flex: 1;
            width: 100%;
        }

        /* list */
        .sl-list_box {
            background-color: white;
            border-radius: 4px;
            padding: 10px 15px;
        }

        .sl-card_one {
            display: flex;
            flex-direction: row;
            padding: 15px 0;
            border-bottom: 1px solid #f8f8f8;
            justify-content: space-between;
        }

        .sl-card_img {
            width: 90px;
            height: 68px;
        }

        .sl-chk_img_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 35px;
            height: 68px;
            margin-right: 13px;
        }

        .sl-chk_img {
            width: 20px;
            height: 20px;
        }

        .sl-card_details {
            flex: 1;
            margin-left: 13px;
            width: 183px;
        }

        .sl-card_title {
            font-size: 15px;
            color: #333333;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .sl-card_tips {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 8px;
            justify-content: space-between;
        }

        .sl-card_tip {
            font-size: 12px;
            color: #999999;
            padding: 0 4px;
            background-color: #f9faf9;
            margin-right: 5px;
        }

        .sl-card_lower {
            width: 10px;
            height: 10px;
        }

        .sl-card_dz {
            font-size: 12px;
            text-align: right;
            color: #999999;
        }

        .sl-card_pbox {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
        }

        .sl-card_price {
            font-size: 14px;
            color: #ff7037;
        }

        .sl-card_num {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 106px;
            height: 30px;
            border: 1px solid #f8f8f8;
            border-radius: 4px;
        }

        .sl-card_btn {
            width: 35px;
            text-align: center;
            font-size: 20px;
            color: #555555;
        }

        .sl-card_btn_disable {
            color: #cccccc;
        }

        .sl-card_num_text {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #333333;
        }

        .footer_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 51px;
            background-color: white;
        }

        .footer_chk {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 40px;
        }

        .chkall_img {
            width: 20px;
            height: 20px;
            margin-left: 15px;
        }

        .chk_zi {
            font-size: 12px;
            color: #666666;
            margin-left: 6px;
        }

        .footer_zi {
            flex-direction: row;
            align-items: center;
        }

        .footer_czi {
            font-size: 13px;
            color: #333333;
        }

        .footer_rzi {
            font-size: 15px;
            color: #fe5c00;
        }

        .footer_btn {
            width: 96px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #ffffff;
            border-radius: 2px;
            margin: 0 8px;
            background-color: #ff7037;
        }

        .footer_btn:active {
            opacity: 0.7;
        }

        .coverbg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .flex-auto {
            flex: auto;
        }
    </style>
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <!-- 顶部导航 -->
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back display-none">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">购物车</span>
        </div>
        <div class="shopping-list scroll-view-y flex-auto">
            <!-- 顶部title -->
            <div class="nav_box">
                <span class="nav_appname" style="margin-left: 10px;">辰乡乐商城</span>
                <div class="flex1"></div>
                <!--  <span class="nav_btn">编辑</span>-->
            </div>
            <!-- 购物车列表 -->
            <div class="sl-list_box  ">

                <div class="sl-card_one" v-for="( item , index) in data.list">
                    <div class="sl-chk_img_box">
                        <input type="checkbox" class=" prock" v-model="item.checked"
                            @click="procheck(this,item,index)" />
                    </div>
                    <img @click="onDetailClick(item)" class="sl-card_img " :src="item.img" mode="aspectFill" />
                    <div class="sl-card_details">
                        <span class="sl-card_title " style="white-space:nowrap">{{item.title}}</span>
                        <div class="sl-card_tips">
                            <!-- <span class="sl-card_tip">默认</span> -->
                            <span class="sl-card_tip " item="item.buynum">默认</span>

                            <img class="sl-card_lower" src="../images/main3/lower.png" />

                            <span class="sl-card_tip " data="item.id" @click="deletePro(index)">X</span>
                        </div>
                        <div class="sl-card_pbox">
                            <span class="sl-card_price ">{{item.price}}</span>

                            <div class="sl-card_num">
                                <span class="sl-card_btn " data="index" @click="psub(item,index)">-</span>
                                <span class="sl-card_num_text ">{{item.buynum}}</span>
                                <span class="sl-card_btn " data="index" @click="padd(item,index)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pleaselogin" style="text-align:center " v-show="!data.isLogin">请登录后查看购物车</div>
            <div class="empty" style="text-align:center ; " v-show="data.list.length==0">请购物</div>
        </div>
        <!-- 结算 -->
        <div class="footer_box">
            <div class="footer_chk">
                <img class="chkall_img" src="../images/main3/chk_1.png" />
                <span class="chk_zi">全选</span>
            </div>
            <div class="footer_zi">
                <span class="footer_czi">合计：</span>
                <span class="footer_rzi ">￥{{data.sum}}</span>
                <span class="footer_btn" @click="onPlaceClick()">结算</span>
            </div>
        </div>
    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>


<script type="module">
    import { createApp } from 'https://le.6gcc.com/app/web/script/pvue.js'
    const APP = () => {
        createApp({
            data: {
                list: [],
                sum: 0,
                isLogin: false,
            },
            async loadnews() {
                let id = core.getParam("id");
                let res = await core.getNews(id);
                this.data = res;

            },
            initcart() {
                console.log("init cart ");
                var cart = $api.getStorage('car');
                if (cart == '' || cart == null) {
                    cart = [];
                }
                this.data.list = cart;
                this.getSum();
            }
            , psub(item, index) {
                if (item.buynum < 1) return;
                item.buynum = item.buynum - 1;
                this.getSum();
                this.updateCart();

            },
            padd(item, index) {

                item.buynum = item.buynum + 1;
                this.getSum();
                this.updateCart();
            },
            updateCart(){
                // 更新购物车缓存数据
                $api.setStorage('car', this.data.list);
            },
            onDetailClick(item) {
                api.openWin({
                    name: 'detail',
                    url: './detail.html?id=' + item.id
                })
            }, 
            onPlaceClick() {
                if (core.checklogin()) {
                    api.openWin({
                        name: 'place_order',
                        url: './place_order.html'
                    });
                }
            },
            procheck(obj, item, index2) {
                $api.setStorage('car', this.data.list)
                this.getSum();
            },
            getSum() {
                var sum = 0;

                for (var i = 0; i < this.data.list.length; i++) {
                    var ck = this.data.list[i];
                    if (ck.checked) {
                        sum += Number(ck.price) * Number(ck.buynum);
                    }
                }
                this.data.sum = sum;
            },
            deletePro(k) {
                this.data.list.splice(k, 1);

                $api.setStorage('car', this.data.list);

            },

            mounted() {

                window.app = this;
                this.data.isLogin = core.checklogin();

                if (this.data.isLogin) {
                    this.initcart();
                    window.initcart = this.initcart;
                } else {
                    core.log('没有登录')
                    core.login();
                }

            }
        }).mount()
    }

    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>

<script>













    function procheck(obj) {
        return;
        var cart = $api.getStorage('car');
        if (obj) {
            var index = obj.getAttribute("data");
            if (index) {
                console.log(index);
                var cks = document.querySelectorAll(".prock");

                cart[index]["checked"] = obj.checked;
                $api.setStorage('car', cart)
            }
        }

        var sum = 0;
        if (!cks) {
            cks = document.querySelectorAll(".prock");
        }
        for (var i = 0; i < cks.length; i++) {
            var ck = cks[i];
            if (ck.checked) {
                sum += Number(cart[i].price) * Number(cart[i].buynum);
            }
        }
        htmldata.sum = sum;

    }


</script>

</html>